<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;list-style: none;}
        .box{
            position: relative;
            margin:0 auto;
            margin-top:100px;
            width:830px;
            height:482px;
            overflow: hidden;
        }
        ul>li{
            float: left;
        }
        .box>div>span{
            display: block;
        }
        .box>div.dv1{
            position: absolute;
            display:none;
            top:221px;
            width: 100%;
        }
        .dv1>.spl{
            float: left;
            width:40px;
            text-align: center;
            hieght:40px;
            line-height: 40px;
            background: #ccc;
            font-size:24px;
        }
        .dv1>.spr{
            float: right;
            width:40px;
            text-align: center;
            hieght:40px;
            line-height: 40px;
            background: #ccc;
            font-size:24px;
        }
        .dv2{
            position: absolute;
            bottom:50px;
            left:352.5px;
            width:125px;
            margin:0 auto;
        }
        .dv2>span{
            display: block;
            float:left;
            text-align: center;
            line-height: 15px;
            font-size: 12px;
            color:saddlebrown;
            margin:0 4px;
            width:15px;
            height:15px;
            border:1px solid #cccccc;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="dv1"><span class="spl">&lt</span><span class="spr">&gt</span></div>
    <ul>
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
        <li><img src="img/5.jpg" alt=""></li>
    </ul>
    <div class="dv2"><span></span><span></span><span></span><span></span><span></span></div>
</div>
<script src="jquery.js"></script>
<script>
    $(function(){
        var time,i=0;
        tim();
        $('.box').hover(function(){
            $('.dv1').stop().show(500);
            clearInterval(time);
        },function(){
            $('.dv1').stop().hide(500);
            tim();
        });
        $('.box>div>span').mouseenter(function(){
            $(this).css('cursor','pointer');
        });
        $('.spl').click(function(){
            clearInterval(time);show();});
        $('.spr').click(
            function(){clearInterval(time);show(true);});
        $('.dv2>span').hover(function(){
            var index= $('.dv2>span').index(this);
            show('',index);
        });
        function tim(){
            time=setInterval(function(){
                show(true);
            },1000);
        }
        function show(bl,index){
            if (!bl) {
                i--;
                if (i < 0) {
                    i = 4;
                }
            } else {
                i++;
                if (i >= 5) {
                    i = 0;
                }
            }
            if(index+1){
               i=index;
            }
            $('.box>ul>li').css('display','none');
            $('.dv2>span').css('background','');
            $('.box>ul>li').eq(i).css('display','block');
            $('.dv2>span').eq(i).css('background','orange');
        }
    });
</script>
</body>
</html>